<template>
  <div class="shopdetail">
    <ContentBox title="店铺详情" @left="goBack" :fixed="true">
      <template slot="oleft"><van-icon name="arrow-left" size=".48rem" color="#999999"/></template>
      <template slot="oright"><van-icon name="ellipsis" size=".48rem" color="#999999"/></template>
    </ContentBox>
    <!-- <header>
      <van-icon name="arrow-left" class="scan" size=".48rem" @click="goBack"/>
      <van-search placeholder="请输入搜索关键词" v-model="searchValue" shape="round" class="search" @keypress="searchKeyWord"/>
      <van-icon name="ellipsis" class="code" size=".48rem" info="99"/>
    </header> -->
    <notice :top="$remToPx(0.88)"></notice>
    <div class="shophome_info">
      <div class="info_header">
        <van-image
          class="shop_cover"
          width=".8rem"
          height=".8rem"
          fit="cover"
          :src="shopInfo.logo"
          :radius="$remToPx(0.08)"
        />
        <div class="shophome_title">
          <p class="title">
            <span class="van-ellipsis">{{shopInfo.name}}</span>
            <span class="title_url"><van-icon name="arrow" size=".14rem"/></span>
          </p>
          <span>{{shopInfo.focusUserCount}}关注</span>
        </div>
        <div v-if="shopInfo.focus_user_count" class="isFollow follow">已关注</div>
        <div v-else class="unFollow follow"><van-icon name="like-o" />关注</div>
      </div>
      <van-divider />
      <p class="shop_intro">{{shopInfo.intro}}</p>
    </div>
    <div class="shop_baseinfo">
      <h4>基础信息</h4>
      <van-cell value="福克斯">
        <template slot="title">
          <span class="custom-title">掌柜名</span>
        </template>
      </van-cell>
      <van-cell value="400-8546-8888">
        <template slot="title">
          <span class="custom-title">客服电话</span>
        </template>
      </van-cell>
      <van-cell is-link @click="show = true">
        <template slot="title">
          <span class="custom-title">企业资质</span>
        </template>
      </van-cell>
      <van-cell value="2016-05-28 09:40:00">
        <template slot="title">
          <span class="custom-title">开店时间</span>
        </template>
      </van-cell>
    </div>
    <van-image-preview
      v-model="show"
      :images="images"
      :showIndex="false"
    >
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      shopInfo: '',
      show: false,
      images: []
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    searchKeyWord () {},
    getShopDetailInfo (id) {
      this.$axios.get(`/api/merchant/${id}`).then(res => {
        if (res.status === 200) {
          this.shopInfo = res.data
          this.images.push(this.shopInfo.license)
        } else {
          this.$dialog({ message: res.msg })
        }
      })
    }
  },
  created () {
    if (this.$route.params.id > -1) {
      this.getShopDetailInfo(this.$route.params.id)
    } else {
      this.$dialog({ message: '商户不存在' })
    }
  }
}
</script>

<style lang="scss">
.shopdetail{
  background: #F6F6F6;
  height: 100%;
  padding-top: .88rem;
  header{
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    padding: .14rem .32rem;
    position: fixed;
    top: 0;
    left: 0;
    font-size: .24rem;
    color: #999999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan, .code{
      width: .44rem;
      height: .44rem;
      color: #999999;
    }
    .search{
      width: 5.36rem;
      height: .6rem;
      padding: 0;
      background: #ffffff !important;
      &>*{
        // background: #ffffff;
        width: 100%;
        border-radius: .36rem;
        height: .6rem;
      }
    }
    .van-cell__value--alone{
      display: flex;
    }
  }
  .shophome_info{
    padding: .48rem .3rem .24rem .24rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .info_header{
      display: flex;
      align-items: center;
      .shop_cover{
        flex: 0 1 auto;
        margin-right: .16rem;
      }
      .shophome_title{
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;
        &>span{
          color: #333333;
          font-size: .24rem;
        }
        .title{
          display: flex;
          font-size: .32rem;
          color: #333333;
          font-weight: 500;
          align-items: center;
          flex: 1;
          &>span:first-child{
            flex: 1;
            max-width: 4rem;
          }
          .title_url{
            display: flex;
            justify-content: center;
            align-items: center;
            width: .24rem;
            height: .24rem;
            border-radius: 1rem;
            border: .02rem solid #999999;
          }
        }
        .title_url{
          margin-left: .16rem;
        }
      }
      .follow{
        width: 1.12rem;
        height: .48rem;
        border-radius: .24rem;
        font-size: .2rem;
        text-align: center;
        line-height: .48rem;
        margin-left: .24rem;
      }
      .isFollow{
        border: .02rem solid #999999;
      }
      .unFollow{
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg,rgba(254,0,0,1) 0%,rgba(255,42,86,1) 100%);
      }
    }
    .shop_intro{
      color: #333333;
      font-size: .24rem;
    }
  }
  .shop_baseinfo{
    margin-top: .3rem;
    background: #ffffff;
    padding: .3rem 0 0;
    border-radius: .16rem;
    overflow: hidden;
    h4{
      color: #999999;
      font-size: .24rem;
      padding: 0 .24rem;
    }
    &>.van-cell{
      color: #333333;
      font-size: .24rem;
    }
  }
}
</style>
